<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="clearfix" slot="header">
        <span>百度网盘授权api</span>
      </div>
      <div class="api">
        <el-button type="primary" icon="el-icon-share" @click="btnCode"
          >授权百度网盘</el-button
        >
      </div>
      <!-- 显示token -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="bd_name" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="bd_token" label="token"> </el-table-column>
        <el-table-column prop="address" label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="delToken"
              >移除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import { mapActions } from "vuex";

export default {
  data() {
    return {
      // tableData: [],
    };
  },
  computed: {
    tableData() {
      return this.$store.state.user.userInfo.bd_token
        ? [this.$store.state.user.userInfo]
        : [];
    },
  },
  created() {
    const code = window.location.search;
    console.log(55, code);

    if (code) {
      // client_id 为AppKey
      const client_id = "ekYqhi3sG5SOA1RwGkln5gMAuIxjAfSM";
      // client_secret 为SecretKey
      const client_secret = "T2kz55B45XRsCNjNM4yKOWJJ9rq82E8A";
      // redirect_uri 回调地址
      //const redirect_uri = "http://localhost:9529/example/authorization/";
      // 上线地址
      const redirect_uri = "http://192.168.79.100/example/authorization/";
      const zcode = this.GetQueryValue("code");
      console.log(44, zcode);
      const that = this;
      axios({
        url: `/wpapi/oauth/2.0/token?grant_type=authorization_code&code=${zcode}&client_id=${client_id}&client_secret=${client_secret}&redirect_uri=${redirect_uri}`,
      }).then(async (res) => {
        console.log(res);
        const bd_token = res.data.access_token;
        const len = await that["user/baiduToken"](bd_token);

        console.log(67, len);
        if (len) {
          return this.$notify({
            title: "成功",
            message: "授权成功！",
            type: "success",
          });
        }
        return this.$$notify({
          title: "错误",
          message: "授权失败！",
        });
      });
    }
  },
  methods: {
    ...mapActions(["user/baiduToken", "user/removeBaiduTokens"]),
    btnCode() {
      // 授权相关业务
      const client_id = "ekYqhi3sG5SOA1RwGkln5gMAuIxjAfSM";
      const redirect_uri = "http://localhost:9529/";
      const device_id = 88187203;
      const force_login = 0;
      window.location.href = `https://openapi.baidu.com/oauth/2.0/authorize?response_type=code&client_id=${client_id}&redirect_uri=${redirect_uri}example/authorization/&scope=basic,netdisk&device_id=${device_id}&force_login=${force_login}`;
    },
    GetQueryValue(queryName) {
      var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i");
      // 获取url中"?"符后的字符串并正则匹配
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return decodeURI(r[2]);
      } else {
        return null;
      }
    },
    // 删除token
    delToken() {
      const that = this;
      this.$confirm("此操作将删除token, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          that["user/removeBaiduTokens"]();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
.api {
  padding: 0px 0;
}
</style>
